<template>
  <view>
    <!-- <l-navigation-bar color="#FFFFFF" title="个人中心" position="absolute" /> -->

    <l-background />

	<view class="nav-bag"></view>
    <!-- <mine-info ref="userInfo" :top="top" /> -->
	<new-mine-info />
    <view class="padding-lr-30 margin-top-25 padding-bottom-30">
      <mine-grid title="财务管理" :list="financeList" @click="gridClick" />
      <mine-grid title="常用功能" margin="32rpx 0 0 0" :list="featuresList" @click="gridClick" />
    </view>

    <mine-poster @mounted="huoKeInfo = $event" />
	<view class="close-btn" v-if="userId">
		<view class="close-user" @click="showActionSheet=true">
			退出登录
		</view>
	</view>
	<tui-actionsheet tips="退出登录会清除您的登录信息，确认退出？" :show.sync="showActionSheet" :item-list="itemList" @click="logout" />
    <!-- #ifndef APP-PLUS -->
    <mine-poster-model :show.sync="showPoster" :huo-ke-info="huoKeInfo" />
    <!-- #endif -->
	<dc-materialprompt></dc-materialprompt>
  </view>
</template>

<script>
import MineInfo from './components/mine-info/mine-info'
import NewMineInfo from './components/new-mine-info/new-mine-info'
import MineGrid from './components/mine-grid/mine-grid'
import MinePoster from './components/mine-poster/mine-poster'
import MinePosterModel from './components/mine-poster-model/mine-poster-model.nvue'
import { getNewestVerion } from '@/common/api/version'
import { checkVersion, openSubView } from '@/common/plus'
import { loading } from '@/common/util'
import colors from '@/common/colors'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Mine',
  components: {
    MineInfo,
    MineGrid,
    MinePoster,
    MinePosterModel,
	NewMineInfo
  },
  data() {
    return {
		itemList: [
		  { text: '退出登录', color: colors.colorError }
		],
		showActionSheet:false,
      top: '',
      showPoster: false,
      hasNewVersion: false,
      huoKeInfo: {},
      financeList: [
        { label: '账单管理', icon: 'icon_bill.svg', url: '/user/bill-management/bill-management', auth: 'bill_view', needVip: false },
        /* #ifndef APP-PLUS*/
        { label: '挂账管理', icon: 'icon_open_account.svg', url: '/user/account-management/account-management', auth: 'creditManagement_view', needVip: false }
        /* #endif */
      ],
      featuresList: [
        { label: '包车需求', icon: 'icon_need.svg', url: '/user/hook/hook', auth: 'hook_order', needVip: true },
        { label: '成员管理', icon: 'icon_member.png', url: '/user/member-management/member-management', auth: 'sub_account_view', needVip: true },
        { label: '客户管理', icon: 'icon_client.svg', url: '/user/customer-management/customer-management', auth: 'client_view', needVip: false },
        { label: '获客小程序', icon: 'icon_mp.svg', url: '', auth: 'hook_mp', needVip: true },
        { label: '安全设置', icon: 'icon_setting.svg', url: '/user/safety-setting/safety-setting', auth: '', needVip: false },
        { label: '帮助中心', icon: 'icon_help.svg', url: '/user/help/help', auth: '', needVip: false },
        { label: '意见反馈', icon: 'icon_opinion.svg', url: '/user/feedback/feedback', auth: '', needVip: false },
		{ label: '抢单设置', icon: 'icon_grabasingle.svg', url: '/user/set-rob-order/set-rob-order', auth: '', needVip: false },
        /* #ifdef APP-PLUS*/
        { label: '检查更新', icon: 'icon_update.svg', url: '', auth: '', needVip: false }
        /* #endif */
      ],
    }
  },
  computed:{
  	...mapGetters({
  	  userId: 'userId',
  	  userInfo: 'userInfo',
  	  companyInfo: 'companyInfo'
  	})
  },
  onShow() {
    if (this.$refs.userInfo && this.$refs.userInfo.init) this.$refs.userInfo.init()
  },
  created() {
    /* #ifdef APP-PLUS*/
    uni.$on('showAction', (src) => {
      openSubView('/pages/mine/components/mine-action-model/mine-action-model', 'slide-in-bottom', 21, 'action-mask', 20)
      setTimeout(() => {
        uni.$emit('shareUrl', { src })
      }, 100)
    })
    /* #endif*/
  },
  beforeDestroy() {
    uni.$off('showAction')
  },
  methods: {
	  logout() {
	    this.showActionSheet = false
	    this.login.loginOut('/auth/authentication/removeToken')
	  },
    gridClick(e) {
      if (e.icon.includes('icon_mp')) {
        // 获客小程序
        if (this.huoKeInfo.filePath) {
          this.openHook()
        } else {
          const l = loading('请稍后...', () => {
            let timer = setInterval(() => {
              if (this.huoKeInfo.filePath) {
                this.openHook()
                l.hide()
                clearInterval(timer)
                timer = null
              }
            }, 100)
          })
        }
      } else if (e.icon.includes('icon_update')) {
        // 检查更新
        this.checkNewestVersion()
      } else {
        this.jump(e.url)
      }
    },
    openHook() {
      /* #ifndef APP-PLUS*/
      uni.$emit('huoKeInfo', this.huoKeInfo)
      this.showPoster = true
      /* #endif*/

      /* #ifdef APP-PLUS*/
      openSubView('/pages/mine/components/mine-poster-model/mine-poster-model', 'zoom-fade-out', 11, 'modal-mask')
      setTimeout(() => {
        uni.$emit('huoKeInfo', this.huoKeInfo)
      }, 100)
      /* #endif*/
    },
    // 检查是否有新版本
    async checkNewestVersion() {
      const [err, res] = await getNewestVerion({ platform: 2 })
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      if (data) {
        checkVersion(data).then(res => {
          if (res) {
            openSubView('/components/update-modal/update-modal', 'zoom-fade-out', 11, 'upload-mask')
            return
          }
        })
      }
      this.toast('已是最新版本')
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(top,25)

.mine-top{
  position:relative;
  padding-top:192rpx;
  border-radius: 0 0 375rpx 375rpx / 0 0 18rpx 18rpx;
  overflow: hidden;
}
.mine-background{
  @include position(absolute,0,0);
}
.nav-bag{
	// background: linear-gradient(180deg,#2c3137,#fff);
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 441rpx;
	background-color: #2c3137;
	box-shadow:  0 -180rpx 92rpx -96rpx #fff inset;
}
.close-btn{
	width: 100%;
	box-sizing: border-box;
	padding: 0rpx 30rpx 20rpx 30rpx;
	.close-user{
		border-radius: 18rpx;
		letter-spacing: 2rpx;
		width: 100%;
		padding: 36rpx 0rpx;
		background-color: #2C3137FF;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row !important;
		font-size: 38rpx;
		font-weight: 300;
		color: #FFFFFF;
	}
}
</style>
